import Taro, {Component, Config} from '@tarojs/taro'
import {View, Swiper, SwiperItem, Text, Image, ScrollView} from '@tarojs/components'
import {observer, inject} from '@tarojs/mobx'

import {AtTabs, AtTabsPane} from 'taro-ui'
import 'taro-ui/dist/style/index.scss'

import {memberTypeArr} from '../../utils/common'

import './upgrade.scss'
import bg_06 from "../../assets/img/bg_06.png";
import bg_07 from "../../assets/img/bg_07.png";
import bg_08 from "../../assets/img/bg_08.png";

class Upgrade extends Component {
  state = {
    current: 2,
    navs: memberTypeArr,
    currentNavId: 1,
  }

  componentWillMount() {
  }

  componentDidShow() {
  }

  checked() {
    this.setState({checked: !this.state.checked})
  }

  setCurrentNavId(id: number, index: number) {
    console.log(index)
    this.setState({currentNavId: id, current: index})
  }

  onChange() {
  }

  handleClick(value) {
    this.setState({current: value})
  }

  setTab() {
  }

  render() {
    let {currentNavId, current} = this.state
    const tabList = [{title: '初级联养'}, {title: '中级联养'}, {title: '高级联养'}]
    return (
      <View className='upgrade page-bg content-20'>
        <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>
          <AtTabsPane current={this.state.current} index={0}>
            <View className='upgrade-swiper-item'>
              <Image className='upgrade-con__bg' src={bg_06}/>
              <View className='upgrade-con__title'>初级 联合养鱼</View>
              <View className='upgrade-con__info'>
                <View className='upgrade-con__l'>
                  <View className='upgrade-con__price yuan'>1000</View>
                  <View className='upgrade-con__origin'>原价：￥1200</View>
                </View>
                <View className='upgrade-con__btn'>立即开通</View>
              </View>

            </View>
            <View className='upgrade-tips'>优先权益介绍</View>
            <View className='upgrade-desc'>优先权益介绍</View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View className='upgrade-swiper-item upgrade-swiper-item2'>
              <Image className='upgrade-con__bg' src={bg_07}/>
              <View className='upgrade-con__title'>中级 联合养鱼</View>
              <View className='upgrade-con__info'>
                <View className='upgrade-con__l'>
                  <View className='upgrade-con__price yuan'>1000</View>
                  <View className='upgrade-con__origin'>原价：￥1200</View>
                </View>
                <View className='upgrade-con__btn'>立即开通</View>
                <View className='upgrade-con__d'>您已到达该等级</View>
              </View>
            </View>
            <View className='upgrade-tips'>优先权益介绍</View>
            <View className='upgrade-desc'>优先权益介绍</View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={2}>
            <View className='upgrade-swiper-item upgrade-swiper-item3'>
              <Image className='upgrade-con__bg' src={bg_08}/>
              <View className='upgrade-con__title'>高级 联合养鱼</View>
              <View className='upgrade-con__info'>
                <View className='upgrade-con__l'>
                  <View className='upgrade-con__price yuan'>1000</View>
                  <View className='upgrade-con__origin'>原价：￥1200</View>
                </View>
                <View className='upgrade-con__btn'>立即开通</View>
              </View>

            </View>
            <View className='upgrade-tips'>优先权益介绍</View>
            <View className='upgrade-desc'>优先权益介绍</View>
          </AtTabsPane>
        </AtTabs>

        <Swiper
          className={current === 0 ? 'upgrade-swiper current0' : 'upgrade-swiper'}
          current={current}
          style={{display: 'none'}}
        >
          <SwiperItem className='upgrade-swiper-item'>
            <Image className='upgrade-con__bg' src={bg_06} />
            <View className='upgrade-con__title'>初级 联合养鱼</View>
            <View className='upgrade-con__info'>
              <View className='upgrade-con__l'>
                <View className='upgrade-con__price yuan'>1000</View>
                <View className='upgrade-con__origin'>原价：￥1200</View>
              </View>
              <View className='upgrade-con__btn'>立即开通</View>
            </View>
          </SwiperItem>
          <SwiperItem className='upgrade-swiper-item upgrade-swiper-item2'>
            <Image className='upgrade-con__bg' src={bg_07}/>
            <View className='upgrade-con__title'>中级 联合养鱼</View>
            <View className='upgrade-con__info'>
              <View className='upgrade-con__l'>
                <View className='upgrade-con__price yuan'>1000</View>
                <View className='upgrade-con__origin'>原价：￥1200</View>
              </View>
              <View className='upgrade-con__btn'>立即开通</View>
              <View className='upgrade-con__d'>您已到达该等级</View>
            </View>
          </SwiperItem>
          <SwiperItem className='upgrade-swiper-item upgrade-swiper-item3'>
            <Image className='upgrade-con__bg' src={bg_08}/>
            <View className='upgrade-con__title'>高级 联合养鱼</View>
            <View className='upgrade-con__info'>
              <View className='upgrade-con__l'>
                <View className='upgrade-con__price yuan'>1000</View>
                <View className='upgrade-con__origin'>原价：￥1200</View>
              </View>
              <View className='upgrade-con__btn'>立即开通</View>
            </View>
          </SwiperItem>
        </Swiper>
      </View>
    )
  }
}

export default Upgrade
